<template>
  <div class="app-customer-management">
    <section class="app-main">
      <div class="tab-button">

      <mt-field label="" placeholder="可输入车主、车牌号和号码查询" v-model="searchValue" @keyup.enter.native="handleSearchCar"><span class="iconfont icon-search" @click="handleSearchCar"></span></mt-field>
      <span class="action-add" @click="handleAdd">+</span>
    </div>
      <div class="tab-body">
        <ul class="car-list">

          <li class="item" v-for="item in carList">
            <div class="item-header">
              {{item.carNo}}
              <span class="item-state ">{{item.innerNo}}</span>
              <span class="iconfont icon-shanchu2" @click="handleDelCar(item.vehicleId)"></span>
            </div>
            <div class="item-body">
              <dl class="item-body-content" @click="handleDetails(item.vehicleId)">
                <dd><span class="item-addon">VIN码：</span>{{item.vin}}</dd>
                <dd><span class="item-addon">汽车品牌：</span>{{item.carQuery}}</dd>
              </dl>
            </div>
            <div class="item-footer" @click="handleDetails(item.vehicleId)">
            <mt-button type="danger">车辆详情</mt-button>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <mt-popup
      class="modal-car-city"
      v-model="popupSelectCity"
      position="bottom">
      <CarnoCity @popupClose="popupSelectCity=false" @selectCity="handleSelectCity"></CarnoCity>
    </mt-popup>

    <mt-popup
      v-model="popupSelectCar"
      position="right" class="popup-nature" style="width: 90%">

      <selectCar @carData="getCarData"></selectCar>
    </mt-popup>


    <mt-popup
      v-model="popupAdd"
      position="right"
      class="popup-add">
      <template>
        <mt-field class="input-car-no" label="车牌号" placeholder="请输入车牌号" v-model="form.carNo" @blur.native.capture="handleCheckCar">
          <span class="car-no-area" @click="popupSelectCity=true">{{curCityTitle}}</span>
        </mt-field>
        <mt-field label="自编号" placeholder="请输入自编号" v-model="form.innerNo"></mt-field>
        <mt-field label="联系人" placeholder="请输入联系人" v-model="form.carOwner"></mt-field>
        <mt-field label="联系电话" placeholder="请输入联系电话" v-model="form.phone"></mt-field>
        <mt-field label="车架号" placeholder="请输入车架号" v-model="form.vin"></mt-field>
        <mt-field label="车型" placeholder="请选择车型" v-model="form.carQuery" readonly="readonly" @click.native="handleSelectCar"></mt-field>

        <mt-field label="注册日期" placeholder="请选择车辆注册日期" type="text" v-model="form.buyDate" readonly="readonly" @click.native="openPicker('buyDate')"></mt-field>
        <mt-field label="下次年审日期" placeholder="请选择下次年审日期" type="text" v-model="form.nextCheckDate" readonly="readonly" @click.native="openPicker('nextCheckDate')"></mt-field>
        <mt-field label="保险公司" placeholder="请输入保险公司" v-model="form.insurecompanyName"></mt-field>
        <mt-field label="保险日期" placeholder="请选择保险日期" type="text" v-model="form.insuranceDate" readonly="readonly" @click.native="openPicker('insuranceDate')"></mt-field>
      </template>
      <div class="button-content">
        <div class="button-block-6">
          <mt-button type="default" @click="popupAdd = false">取消</mt-button>
        </div>
        <div class="button-block-6">
          <mt-button type="primary" @click="handleConfirm">确定</mt-button>
        </div>
      </div>
    </mt-popup>

    <mt-datetime-picker
      class="select-datetime"
      ref="picker"
      v-model="pickerValue"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      :startDate="startDate"
      :endDate="endDate"
      @confirm="handleDateChange">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import { Cell,Toast,MessageBox,Indicator } from 'mint-ui';
  import CarnoCity from '../common/carno-city.vue';
  import selectCar from '../common/select-car-brand.vue'
  export default {
    components:{
      CarnoCity,
      selectCar
    },
  data () {
    return {
      total:'',
      page:1,
      rows:100,
      popupAdd:false,
      form:{},
      searchValue:'',
      carList: [],
      curCityTitle:'粤',
      popupSelectCity:false,
      popupSelectCar:false,
      pickerValue:new Date(),
      startDate:new Date('2010'),
      endDate:new Date(new Date().getTime()+5*360 * 24 * 3600 * 1000),
      selectDateType:'',
    }
  },

  mounted(){
    this.getData();
  },
  methods: {
    /**获取车辆档案**/
    getData() {
      var params = new URLSearchParams();
      params.append('page',this.page);
      params.append('rows',this.rows);
      params.append('searchCode', this.searchValue);
      this.$axios({
        method: 'post',
        url:'gp/app/vehicleApp!getVehicleList.do',
        data:params
      }).then((res)=>{
        this.carList=res.data.rows;
        this.total=res.data.total
    })
    },


    /**搜索车辆档案**/
    handleSearchCar(){
      this.page=1;
      this.rows=10;
      this.getData();
    },
    /**选择车牌地区**/
    handleSelectCity(data){
      this.curCityTitle=data;
      this.popupSelectCity=false;
    },

    /**查看详情**/
    handleDetails(vehicleId){
      var params = new URLSearchParams();
      params.append('form.vehicleId',vehicleId);
      this.$axios({
        method: 'post',
        url:'gp/app/vehicleApp!ajaxVehicle.do',
        data:params
      }).then((res)=>{
        console.log(res)
      this.form=res.data.object;
      this.curCityTitle=res.data.object.carNo.substr(0,1);
      this.form.carNo=res.data.object.carNo.substr(1,(res.data.object.carNo.length));
      this.popupAdd=true;
      })
    },
    /**删除车辆档案**/
    handleDelCar(vehicleId){

      MessageBox({
        title: '',
        message: '确认是否删除该车辆档案?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){
        var params = new URLSearchParams();
        params.append('form.vehicleId',vehicleId);
        this.$axios({
          method: 'post',
          url:'gp/app/vehicleApp!deleteVehicle.do',
          data:params
        }).then((res)=>{
          Toast({
            message: '删除成功！',
            position: 'middle',
            duration: 800
          });
          this.getData();

      })
      }
    });
    },

    /**新增车辆档案**/
    handleAdd(){
      this.form={
          accreditId: '',
          vehicleId: '',
          carNo: '',
          innerNo: '',
          carOwner: '',
          phone: '',
          vin: '',
          carQuery: '',
          brandId: '',
          carFactoryId: '',
          carSeriesId: '',
          carModelId: '',
          buyDate: '',
          nextCheckDate: '',
          insurecompanyName: '',
          insuranceDate: '',
      };
      this.popupAdd=true;
    },

    /**确认新增车辆档案**/
    handleConfirm(){
      if(this.form.carNo==''){
        Toast({
          message: '请输入车牌号',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var reg = /[\u4e00-\u9fa5]/g;
      if(reg.test(this.form.carNo)){
        Toast({
          message: '请输入正确的车牌号',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      if(this.form.carNo.length<5 || this.form.carNo.length>=8){

        Toast({
          message: '请输入正确的车牌号',
          position: 'middle',
          duration: 1000
        });
        return false;

      }
      var params = new URLSearchParams();
      params.append('form.accreditId',this.form.accreditId);
      params.append('form.vehicleId',this.form.vehicleId);
      params.append('form.carNo',this.curCityTitle+this.form.carNo);
      params.append('form.innerNo',this.form.innerNo);
      params.append('form.carOwner',this.form.carOwner);
      params.append('form.phone',this.form.phone);
      params.append('form.vin',this.form.vin);
      params.append('form.carQuery',this.form.carQuery);
      params.append('form.brandId',this.form.brandId);
      params.append('form.carFactoryId',this.form.carFactoryId);
      params.append('form.carSeriesId',this.form.carSeriesId);
      params.append('form.carModelId',this.form.carModelId);
      params.append('form.buyDate',this.form.buyDate);
      params.append('form.nextCheckDate',this.form.nextCheckDate);
      params.append('form.insurecompanyName',this.form.insurecompanyName);
      params.append('form.insuranceDate',this.form.insuranceDate);
      this.$axios({
        method: 'post',
        url:'gp/app/vehicleApp!saveVehicle.do',
        data:params
      }).then((res)=>{
        console.log(res)
      this.popupAdd=false;
      this.getData();
    })
    },
    /**选择车型**/
    handleSelectCar(){
      this.popupSelectCar=true;
    },
    /**获取车型数据**/
    getCarData(data){
      console.log(data)
      this.popupSelectCar=false;
      this.form.carQuery=data.brand+'>'+data.series+'>'+data.carModel
      this.form.brandId=data.brandId
      this.form.carFactoryId=data.factoryId
      this.form.carSeriesId=data.seriesId
      this.form.carModelId=data.carModelId
    },

    openPicker(type) {
      this.selectDateType=type;
      this.$refs.picker.open();
    },

    /**选择时间**/
    handleDateChange() {
      const d = new Date(this.pickerValue);
      const year=d.getFullYear();
      var month='';
      var date='';
      var hour='';
      var minute='';
      if(d.getMonth()+1<=9){
        month='0'+(d.getMonth()+1)
      }else{
        month=d.getMonth()+1
      };
      if(d.getDate()+1<=9){
        date='0'+d.getDate()
      }else{
        date=d.getDate()
      };
      if(d.getHours()+1<=9){
        hour='0'+d.getHours()
      }else{
        hour=d.getHours()
      };
      if(d.getMinutes()+1<=9){
        minute='0'+d.getMinutes()
      }else{
        minute=d.getMinutes()
      };

//      var selectDate=year + '-' + month+ '-' +date+' '+hour+':'+minute;
      var selectDate=year + '-' + month+ '-' +date
      if(this.selectDateType=='buyDate'){
        this.form.buyDate=selectDate
      }else if(this.selectDateType=='nextCheckDate'){
        this.form.nextCheckDate=selectDate
      }else if(this.selectDateType=='insuranceDate'){
        this.form.insuranceDate=selectDate
      }
    },

    /**检查车辆档案是否存在**/
    handleCheckCar(){

      var params = new URLSearchParams();
      params.append('form.carNo',this.curCityTitle+this.form.carNo);

      this.$axios({
        method: 'post',
        url:'gp/app/vehicleApp!checkVehicle.do',
        data:params
      }).then((res)=>{
        if(res.data.result==true && res.data.statusCode==200){
        Toast({
          message: '该车牌档案已存在',
          position: 'middle',
          duration: 1000
        });
      }else{
        var params = new URLSearchParams();
        params.append('form.carNo',this.curCityTitle+this.form.carNo);
        params.append('form.plateFormFlag','0101');
        this.$axios({
          method: 'post',
          url:'gp/app/vehicleApp!checkVehicle.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true && res.data.statusCode==200){


          MessageBox({
            title: '',
            message: '平台找到此车牌号信息，是否覆盖当前档案?',
            showCancelButton: true
          }).then(action => {
            if(action=='confirm'){
            this.form=res.data.object;
            this.curCityTitle=res.data.object.carNo.substr(0,1);
            this.form.carNo=res.data.object.carNo.substr(1,(res.data.object.carNo.length));
          }
        });
        }
      })
      }
    })
    },
  }
}
</script>
<style>

  .app-customer-management .app-main{
    padding:70px 0 0;
  }
  .app-customer-management .tab-button{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding:16px 60px 16px 16px;
    text-align: center;
    z-index: 100;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .app-customer-management .tab-button .mint-cell{
    border: 1px solid #ddd;
    border-radius:20px;
    min-height: 36px;
    padding:0 6px;
  }
  .app-customer-management .tab-button .mint-cell .mint-field-core{
    font-size: 14px;
  }
  .app-customer-management .tab-button  .icon-search{
    padding-left:12px;
    font-size: 20px;

  }
  .app-customer-management .action-add{
    position: absolute;
    top:18px;
    right:12px;
    width:34px;
    height: 34px;
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    background:#007EE5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app-customer-management .popup-test-show .button-content{
    padding:20px;
  }

  .app-customer-management .popup-test-show .mint-button{
    background: #007EE5;
    display: block;
    width: 100%;
  }

  .app-customer-management .popup-add{
    width: 90%;
    height: 100%;
    overflow: auto;
    padding:10px 0;
  }
  .app-customer-management .popup-add .mint-cell-wrapper{
    background:none;
  }
  .app-customer-management .popup-add .mint-cell-title{
    width:98px !important;
    line-height: 22px;
    font-size: 15px;
  }
  .app-customer-management .popup-add .mint-cell .mint-field-core{
    font-size: 15px;
  }
  .app-customer-management .popup-add .mint-cell{
    background:none;
    padding:6px 0;
    border-bottom:1px solid #eee;
    min-height:inherit
  }
  .app-customer-management .popup-add .mint-cell-value{
    padding:6px 8px;
    border-radius:6px
  }
  .app-customer-management .popup-add .item-select{
    padding:0;
  }
  .app-customer-management .popup-add .item-select .mint-cell-value{
    margin-right:0;
    padding:12px 6px;
    flex:1;
  }
  .app-customer-management .popup-add .item-select .mint-cell-title{
    flex:none;
  }
  .app-customer-management .popup-add .other-tips{
    background: #f5f5f5;
    padding:12px 12px 10px;
    font-size: 15px;
    color: #888;
  }
  .app-customer-management .popup-add .button-content{
    background: #fff;
    font-size:0;
    padding:24px;
  }
  .app-customer-management .popup-add .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .app-customer-management .popup-add .button-block-6 .mint-button{
    display: block;
    width: 100%;
  }

  .app-customer-management .car-list{
    padding:15px;
  }

  .app-customer-management .car-list .item{
    background: #fff;
    padding:12px 16px 0;
    margin:0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius:4px;
  }
  .app-customer-management .car-list .item-header{
    position: relative;
    padding:0 0 8px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom:1px solid #eee;
  }
  .app-customer-management .car-list .item-state{
    font-weight: normal;
    font-size: 14px;
  }
  .app-customer-management .car-list .icon-shanchu2{
    position: absolute;
    top:4px;
    right:0;
    font-weight: normal;
    color: #999;
    font-size: 15px;
  }
  .app-customer-management .car-list .item-body{
    margin: 0;
    padding:8px 0 6px;
    font-size:14.6px;
    color: #888;
  }
  .app-customer-management .car-list .item-body .item-body-content{
    margin: 0;
  }
  .app-customer-management .car-list .item-body dd{
    margin: 0 0 5px;
    line-height:20px;
  }
  .app-customer-management .car-list .item-footer{
    border-top:1px solid #ddd;
    margin:0 -16px;
  }
  .app-customer-management .car-list .item-footer .mint-button{
    background:none;
    display: block;
    width: 100%;
    height:44px;
    border-radius:0;
    font-size: 15px;
    color:#007EE5
  }
  .app-customer-management .car-list .item-footer .mint-button:after{
    background:none;
  }
  .app-customer-management .input-car-no .mint-cell-value{
    flex-direction: row-reverse;
  }
  .app-customer-management .input-car-no .car-no-area{
    display: inline-block;
    font-size: 16px;
    width: 36px;
  }
  .app-customer-management .input-car-no .car-no-area:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    border-top: 4px solid #333;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

  }
  .app-customer-management .input-car-no .mint-field-clear{
    display: none !important;
  }
  .app-customer-management .input-car-no .mint-field-other{
    height: 22px;
    line-height: 22px;
  }
  .app-customer-management .modal-car-city{
    width: 100%;
  }
</style>
